// import WMap from '../map';
const map = new WMap.Map('map', {
	center: new WMap.LngLat(116.479662,39.996956),
  zoom: 15
})
map.on('click', e => {
	console.log(e.lngLat)
})


let point = new WMap.Point({
  center: new WMap.LngLat(116.479662,39.996956),
  extData: {'name': '点'}
})
map.add(point)
point.on('click', e => {
  console.log(e.target.getExtData())
})

let line = new WMap.Line({
  map: map,
  path: [new WMap.LngLat(116.477648,39.997149),new WMap.LngLat(116.480078, 39.996506)],
  extData:{'name': '线'} 
})
line.on('click', e => {  
  console.log(e.target.getExtData())
})

let circle = new WMap.Circle({
  center: new WMap.LngLat(116.47614550262452, 39.99763225396728),
  radius: 81.7,
  extData:{'name': '圆'}
})
map.add(circle)
circle.on('click', e => {  
  console.log(e.target.getExtData())
})

let polygon = new WMap.Polygon({
  map: map,
  path: [new WMap.LngLat(116.47699844509125, 39.9982652552948), new WMap.LngLat(116.47721838623048, 39.997278202377316), new WMap.LngLat(116.47869360118867, 39.99738549073791), new WMap.LngLat(116.47857558399201, 39.9979058392868), new WMap.LngLat(116.47837710052491, 39.99842618783569)],
  extData: {'name': '多边形'},
  option: {
    fillColor: 'red', // 填充颜色
    strokeColor: 'green', // 笔触颜色
    strokeWidth: 4, // 笔触宽度
    lineCap: 'round', // 线帽样式 butt、round、 或square
    lineJoin: 'round', // 	线连接样式 bevel、round、 或miter
    imageRadius: 7, // 点样式半径大小
    imageFill: '#264df6',
  }
})
polygon.on('click', e => {
  console.log(e.target.getExtData())
})
polygon.on('contextmenu', e => {
  console.log(e.target.getExtData())
})

let rectangle = new WMap.Rectangle({
  path: [new WMap.LngLat(116.48053896099091,39.99640916665649), new WMap.LngLat(116.48225557476044, 39.99715482076263)],
  extData: {'name': '矩形'}
})
map.add(rectangle)
rectangle.on('click', e => {
  console.log(e.target.getExtData())
})
rectangle.on('contextmenu', () => {
  // e.target.hide()
})
let lp = null
// 主动绘制
let graph = new WMap.VectorGraph(map)
graph.on('done', (e) => {
  console.log(e, '绘制完')
  lp = e.target
})
let graphSelect = document.querySelector('#selected')
graphSelect.onchange = () => {
  if (graphSelect.value === '') {
    graph.deactivate()
  } else {
    graph.activate(graphSelect.value)
  }
}
// 点
let showPoint = document.querySelector('#showPoint')
let hidePoint = document.querySelector('#hidePoint')
let removePoint = document.querySelector('#removePoint')
showPoint.onclick = () => {
  point.show()
}
hidePoint.onclick = () => {
  point.hide()
}
removePoint.onclick = () => {
  map.remove(point)
}

// 线
let showLine = document.querySelector('#showLine')
let hideLine = document.querySelector('#hideLine')
let removeLine = document.querySelector('#removeLine')
showLine.onclick = () => {
  line.show()
}
hideLine.onclick = () => {
  line.hide()
}
removeLine.onclick = () => {
  map.remove(line)
}
// 圆形
let showCircle = document.querySelector('#showCircle')
let hideCircle = document.querySelector('#hideCircle')
let removeCircle = document.querySelector('#removeCircle')
showCircle.onclick = () => {
  circle.show()
}
hideCircle.onclick = () => {
  circle.hide()
}
removeCircle.onclick = () => {
  map.remove(circle)
}
// 多边形
let showPolygon = document.querySelector('#showPolygon')
let hidePolygon = document.querySelector('#hidePolygon')
let removePolygon = document.querySelector('#removePolygon')
showPolygon.onclick = () => {
  polygon.show()
}
hidePolygon.onclick = () => {
  polygon.hide()
}
removePolygon.onclick = () => {
  map.remove(polygon)
}
// 矩形
let showRectangle = document.querySelector('#showRectangle')
let hideRectangle = document.querySelector('#hideRectangle')
let removeRectangle = document.querySelector('#removeRectangle')
showRectangle.onclick = () => {
  rectangle.show()
}
hideRectangle.onclick = () => {
  rectangle.hide()
}
removeRectangle.onclick = () => {
  map.remove(rectangle)
}

let startEdit = document.querySelector('#startEdit')
let endEdit = document.querySelector('#endEdit')
let edit = null
startEdit.onclick = () => {
  edit = new WMap.GraphEdit(map)
  edit.open()
  edit.on('modifyend', e => {
    console.log(e)
    lp = e.target
  })
}
endEdit.onclick = () => {
  edit.close()
}

let deleteDraw = document.querySelector('#deleteDraw')
deleteDraw.onclick = () => {
  map.remove(lp)
}

// 添加其他图层
const markerLayer = new WMap.VectorLayer({ map, className: 'WMap-marker-layer', style: { zIndex: 2 } })
const marker = new WMap.Marker({
	map,
	fontSize: '12px',
	fontFamily: 'sans-serif',
	fontWeight: 'normal',
	fontColor: '#000',
	placement: 'point', // 默认为point
	labelBgColor: '#FFF', // 背景颜色
	borderColor: '#000', // 边框颜色
	borderWidth: '1', // 边框宽度
	textBaseline: 'bottom', // t  似乎无效
	textAlign: 'centrer', //文本对齐方式 ,似乎无效，设置会让文本消失
	labelXOffset: 0, // 水平文本偏移量
	labelYOffset: -30, // 垂直文本偏移量
	padding: [5, 5, 5, 5],
	// 上面为默认配置
	position: [116.479662,39.988956],
	icon: 'https://webapi.amap.com/images/car.png',
	offset: [-26, -13],
	label: '矢量图标: 旋转不停',
	labelYOffset: -42,
	padding: [5, 5, 5, 5],
	labelBgColor: 'skyblue', // 背景颜色
	angle: -90
})
markerLayer.add(marker)
marker.on('click', e => {
  console.table(e.target.getPosition())
})
